<template>
  <div class="container">
    <!-- <CCFormFilter :types="types" @change="onFilterChange" /> -->
    <el-card class="box-card" shadow="hover">
      <h3 slot="header">热销商品</h3>
      <ul class="list">
        <li v-for="item of list" :key="item.id" class="list__item" shadow="hover">
          <HotlistsItem :item="item" />
        </li>
      </ul>
    </el-card>
    <!-- <el-card class="box-card" shadow="hover">
      <h3 slot="header">已售馨</h3>
      <ul class="list">
        <li v-for="(item, index) in 5" :key="index" class="list__item" shadow="hover">
          <HotlistsItem />
        </li>
      </ul>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <h3 slot="header">已完成商品</h3>
      <ul class="list">
        <li v-for="(item, index) in 5" :key="index" class="list__item" shadow="hover">
          <HotlistsItem />
        </li>
      </ul>
    </el-card>-->
    <div class="cc-page">
      <el-pagination :total="total" :current="current" :page-size="limit" @current-change="onPageChange"/>
    </div>
  </div>
</template>

<script >
  // import CCFormFilter from '@/components/common/CCFormFilter.vue';
  import HotlistsItem from '@/components/hotlists/Item.vue';
  import { doList } from '@/apis/hotlists';
  export default {
    name: 'HotlistsIndex',
    components: { HotlistsItem },
    props: {
      new_list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        url_head: 'http://121.199.12.118:8083',
        list: [],
        total: 0,
        limit: 10,
        pageNum: 1,
        current: 1
        // types: [
        //   {
        //     text: '商品状态',
        //     key: 'status',
        //     items: [
        //       { text: '热销中', value: 1 },
        //       { text: '已售馨', value: 2 },
        //       { text: '已完成', value: 3 }
        //     ]
        //   },
        //   {
        //     text: '商品单价',
        //     key: 'amount',
        //     items: [
        //       { text: '100-499元', value: 1 },
        //       { text: '500-999元', value: 2 },
        //       { text: '1000-1999元', value: 3 },
        //       { text: '2000元以上', value: 4 }
        //     ]
        //   }
        // ]
      };
    },
    methods: {
      onFilterChange(data) {
        console.log(data);
      },

      async onPageChange(num) {
        this.pageNum = parseInt(num);
        await this.fetchList();
      },

      async fetchList() {
        const res = await doList(this.limit, this.pageNum);
        this.list = res.data.list;
        this.total = res.data.total;
        for (const value of this.list) {
          if ((value.pic === undefined) || (value.pic == null)) {
            // console.log(value.pic);
            continue;
          }
          if (value.pic.indexOf('/var/upload') !== -1) {
            value.pic = this.url_head + value.pic;
            // console.log(value.pic);
          }
        }
      }
    },
    watch: {
      new_list: {
        immediate: true,
        deep: true,
        handler(to) {
          this.list = to;
          this.total = to.length;
        }
      }
    }, /**/
    mounted() {
      this.fetchList();
    },
    created() {}
  };
</script>

<style lang="scss" type="text/scss" scoped>
$space: 6px;

.box-card {
  margin-top: $space * 2;
}

.list {
  display: flex;
  padding: $space;
  flex-wrap: wrap;
  &__item {
    background-color: white;
    flex-basis: calc(20% - #{$space * 2});
    margin: $space;
    flex-shrink: 0;
    overflow-x: hidden;
  }
}
</style>
